<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>总体统计</span>
      </div>

      <el-form
        :inline="true"
        ref="queryForm"
        :model="queryParams"
        label-width="68px"
      >
        <el-form-item label="填报时间">
          <el-date-picker
            v-model="fillDate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="resList" stripe>
        <el-table-column label="日期" prop="date" />
        <el-table-column label="星期" prop="week" />
        <el-table-column label="上报人数" prop="week" />
        <el-table-column label="请假人数" prop="week" />
        <el-table-column label="总工时(H)" prop="workHour" />
        <el-table-column label="缺报人数" prop="week" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              v-hasPermi="['work:statistics:view']"
              @click="handleView(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Statistics',
  data() {
    return {
      // 查询参数
      queryParams: {},
      // 时间选项
      fillDate: '',
      // 日期选择选项
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '二周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 14)
              picker.$emit('pick', date)
            }
          },
          {
            text: '三周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 21)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // 遮罩层
      loading: false,
      // 我的填报
      resList: []
    }
  },
  methods: {
    /** 初始化 */
    getList() {},
    /** 搜索按钮操作 */
    handleQuery() {},
    /** 重置按钮操作 */
    resetQuery() {
      this.fillDate = ''
      this.queryParams = {}
      this.handleQuery()
    },
    /** 查看详情 */
    handleView(row) {}
  }
}
</script>
